<template>
  <div v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 200px" placeholder="输入条码查询按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.sn"></el-input>
      <el-input style="width: 200px" placeholder="输入库位查询按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.stock_code"></el-input>
      <el-select class="filter-item" style="width: 220px" :clearable="true" v-model="query.queryString.material_id"
        placeholder="请输入选择物料" filterable :remote-method="getMaOptions" remote @change="research">
        <el-option v-for="i in maOptions" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns"> </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'tab3',
  props: {
    orderId: {
      type: String,
      default: '',
    },
  },
  watch: {
    orderId: {
      handler(n, o) {
        this.query.id = n
        this.getList()
      },
      immediate: true,
    },
  },
  data() {
    return {
      tableProps: {
        hideOperations: true,
      },
      maOptions: [],
      apiList: this.$api.order + 'getrecordsbyid',
      query: {
        id: null,
        queryString: { sn: '' },
      },
      columns: [
        { title: '仓库名称', key: 'warehouse_name' },
        { title: '库位', key: 'stock_code' },
        { title: '条码', key: 'sn', width: 240 },
        { title: '批次号', key: 'lot_date_code', width: 140 },
        { title: '物料名称', key: 'key_part_name', width: 220 },
        { title: '数量', key: 'change_qty' },
        { title: '客户代码', key: 'cust_code', width: 100 },
        { title: '客户名称', key: 'cust_name', width: 200 },
        { title: '供应商代码', key: 'vendor_code', width: 100 },
        { title: '供应商名称', key: 'vendor_name', width: 200 },
        { title: '备注', key: 'remarks' },
      ],
    }
  },
  methods: {
    formatQuery(query) {
      let tmp = _.cloneDeep(query)
      tmp.queryString = JSON.stringify(tmp.queryString)
      return tmp
    },
    getMaOptions(query) {
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            this.maOptions = this.arrayOptions(r, 'id', ['key_part_no', 'key_part_name'])
            this.getFieldConfig('material_id').options = this.maOptions
          })
          .catch(() => {})
      } else {
        this.maOptions = {}
      }
    },
  },
  created() {},
}
</script>

<style>
</style> 